<!--
 * @Descripttion: 全部订单
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-10-20 14:11:17
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:37:25
-->
<template>
  <div>
    <div class="table-content" v-for="(item, index) in orderData" :key="index">
      <div class="header">
        <span style="font-weight: 700">{{ item.createTime }}</span>
        <span style="margin-left: 20px">订单号：{{ item.orderNumber }}</span>
      </div>
      <div class="content">
        <div class="content-order active">
          <div class="ac-img">
            <img :src="item.orderTypeImg" alt="" />
          </div>
          <div>
            <div>
              <div
                class="ac-jt"
                style="
                  font-size: 14px;
                  font-family: PingFangSC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #2b2b2b;
                "
              >
                {{ item.batchName }}
              </div>
              <div
                class="ac-jt"
                style="
                  font-size: 12px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #666666;
                "
              >
                {{ item.total }}/人
              </div>
            </div>
          </div>
        </div>
        <div class="content-order">{{ item.total }}</div>
        <div class="content-order">
          <div v-if="item.status == 1">
            <span style="color: #fa6400">
              {{ item.paymentType | payType }}
            </span>
          </div>
          <div v-if="item.status == 2">
            <div>
              <span style="color: #2b2b2b">
                {{ item.paymentType | payType }}
              </span>
            </div>
          </div>
          <div v-if="item.status == 3">
            <span style="color: #989898">
              {{ item.paymentType | payType }}
            </span>
          </div>
        </div>
        <div class="content-order">
          <div>
            {{ item.status | statusType }}
          </div>
          <div
            style="
              margin-top: 5px;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #1259fa;
              cursor: pointer;
            "
            v-if="item.status == 2"
            @click="orderDetails(item)"
          >
            订单详情
          </div>
        </div>
        <div class="content-order">
          <div v-if="item.status == 1">
            <el-button type="primary" size="default"> 立即支付 </el-button>
            <div class="cancellationOrder">
              <span>取消订单</span>
            </div>
          </div>
          <div v-if="item.status == 2">
            <el-button type="primary" size="default" @click="redund(item)">
              申请退款
            </el-button>
            <div class="cancellationOrder">
              <span @click="modifyOrder(item)">修改订单</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="选择学员"
      :visible.sync="redundShow"
      width="60%"
      @close="stuClose"
    >
      <div class="student-head">
        <div>
          <el-button type="primary" size="default" @click="allRefund">
            全额退款
          </el-button>
        </div>
        <div class="student-head-right">
          <el-input v-model="input" placeholder="请输入姓名/手机号"></el-input>
          <el-button type="primary" size="default" @click="search">
            搜索
          </el-button>
        </div>
      </div>
      <el-table :data="studentData" @selection-change="handleSelectionChange">
        <el-table-column type="selection"> </el-table-column>

        <el-table-column label="姓名" prop="personName"> </el-table-column>
        <el-table-column label="手机号" prop="phone"> </el-table-column>
        <el-table-column label="考试名称" prop="examinationName">
        </el-table-column>
        <el-table-column label="批次名称" prop="batchName"> </el-table-column>
        <el-table-column label="缴费金额" prop="price"> </el-table-column>
      </el-table>
      <div class="footer">
        <div class="footer-left">
          已选择退款人数 {{ multipleSelection.length }}/{{ total }}
        </div>
        <div class="footer-right">
          <el-button type="primary" size="default" @click="redundShow = false">
            取消
          </el-button>
          <el-button type="primary" size="default" @click="nextStep">
            下一步
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="申请退款"
      :visible.sync="submitShow"
      width="30%"
      @close="refundClose"
    >
      <el-form
        :model="refundForm"
        ref="refundForm"
        :rules="refundRules"
        label-width="80px"
      >
        <el-form-item label="退款类型">
          <el-select v-model="refundForm.type" disabled style="width: 330px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="退款原因">
          <el-input
            v-model="refundForm.reason"
            disabled
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item label="退款金额">
          <span
            style="
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ff0000;
            "
          >
            {{ refundForm.refundTotal }}
          </span>
        </el-form-item>
        <el-form-item label="申请说明">
          <el-input
            v-model="refundForm.description"
            type="textarea"
            placeholder="请输入申请原因"
            rows="4"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="previousStep">上一步</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getRefundPeople, refund, checkRefund } from "@/api/refund";
export default {
  props: {
    orderData: {
      type: Array,
      required: true,
    },
  },
  filters: {
    payType: function (val) {
      if (val == 1) {
        val = "微信";
      } else if (val == 2) {
        val = "支付宝";
      } else if (val == 3) {
        val = "线下支付";
      }
      return val;
    },
    statusType: function (val) {
      if (val == 1) {
        val = "待支付";
      } else if (val == 2) {
        val = "已支付";
      } else if (val == 3) {
        val = "已取消";
      }
      return val;
    },
  },
  data() {
    return {
      options: [
        {
          value: 1,
          label: "全额退款",
        },
        {
          value: 2,
          label: "部分退款",
        },
      ],
      allMoney: [],
      submitShow: false,
      refundForm: {
        orderNumber: "",
        orgId: "",
        type: "",
        registerIds: "",
        total: "",
        refundTotal: "",
        reason: "无",
        description: "",
        paymentType: "",
      },
      refundRules: {},
      input: "",
      total: 0,
      fullAmount: [],
      redundShow: false,
      studentData: [],
      multipleSelection: [],
      orderNumber: "",
    };
  },
  watch: {
    input(newValue, oldValue) {
      if (newValue == "") {
        this.getRefundList();
      }
    },
  },
  methods: {
    stuClose() {
      this.input = "";
    },
    // 确定退款
    onSubmit() {
      console.log(this.refundForm);
      if (this.refundForm.reason == "无") {
        this.refundForm.reason = 1;
      }
      refund(this.refundForm).then((res) => {
        this.$message.success(res.msg);
        this.redundShow = false;
        this.submitShow = false;
        this.$parent.getList();
      });
    },
    // 关闭退款
    refundClose() {
      this.refundForm.type = "";
      this.refundForm.registerIds = "";
      this.refundForm.total = "";
      this.refundForm.refundTotal = "";
      this.refundForm.description = "";
      this.refundForm.reason = "无";
    },
    // 上一步
    previousStep() {
      this.submitShow = false;
    },
    // 获取退款人员列表
    getRefundList() {
      getRefundPeople({
        orderNumber: this.orderNumber,
        identification: this.input,
      }).then((res) => {
        this.studentData = res.data;
        this.total = res.data.length;
      });
    },
    accAdd(arg1, arg2) {
      var r1, r2, m, c;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      c = Math.abs(r1 - r2);
      m = Math.pow(10, Math.max(r1, r2));
      if (c > 0) {
        var cm = Math.pow(10, c);
        if (r1 > r2) {
          arg1 = Number(arg1.toString().replace(".", ""));
          arg2 = Number(arg2.toString().replace(".", "")) * cm;
        } else {
          arg1 = Number(arg1.toString().replace(".", "")) * cm;
          arg2 = Number(arg2.toString().replace(".", ""));
        }
      } else {
        arg1 = Number(arg1.toString().replace(".", ""));
        arg2 = Number(arg2.toString().replace(".", ""));
      }
      return (arg1 + arg2) / m;
    },

    // 全额退款
    allRefund() {
      console.log(this.refundForm);
      this.submitShow = true;
      this.refundForm.type = 1;
      var allPrice = 0;
      for (var i = 0; i < this.studentData.length; i++) {
        allPrice = this.accAdd(allPrice, parseFloat(this.studentData[i].price));
      }
      this.refundForm.refundTotal = allPrice;
    },
    // 下一步
    nextStep() {
      if (this.multipleSelection.length == 0) {
        this.$message.info("请选择退款人员");
      } else if (this.multipleSelection.length == this.total) {
        this.allRefund();
      } else {
        this.submitShow = true;
        this.refundForm.type = 2;
        var allPrice = 0;
        let ids = "";
        for (var i = 0; i < this.multipleSelection.length; i++) {
          allPrice = this.accAdd(
            allPrice,
            parseFloat(this.studentData[i].price)
          );
          ids = ids + this.multipleSelection[i].id + ",";
        }
        this.refundForm.registerIds = ids.substring(0, ids.length - 1);
        this.refundForm.refundTotal = allPrice;
      }
    },
    // 搜索
    search() {
      this.getRefundList();
    },
    // 申请退款
    redund(item) {
      checkRefund({
        orderNumber: item.orderNumber,
      }).then((res) => {
        this.orderNumber = item.orderNumber;
        this.redundShow = true;
        this.refundForm.orderNumber = item.orderNumber;
        this.refundForm.orgId = item.orgId;
        this.refundForm.total = item.total;
        this.refundForm.paymentType = item.paymentType;
        this.getRefundList(item.orderNumber);
      });
    },
    // 订单详情
    orderDetails(item) {
      this.$router.push("/orderDetails?id=" + item.id);
    },
    // 修改订单
    modifyOrder(item) {
      checkRefund({
        orderNumber: item.orderNumber,
      }).then((res) => {
        this.$router.push("/modifyOrder?id=" + item.id);
      });
    },
    // 表格前多选器
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style lang="less" scoped>
.table-content {
  border: 1px solid #dfe5ea;
  margin-top: 10px;
  width: 100%;
  height: 198px;
  .header {
    padding-left: 20px;
    width: 100%;
    height: 55px;
    line-height: 55px;
    font-size: 14px;
    background-color: #f8fafc;
  }
  .content {
    width: 100%;
    height: 144px;
    // line-height: 144px;
    align-items: center;
    display: flex;
    justify-content: space-around;
    .content-order {
      width: 20%;
      text-align: center;
    }
  }
}
.active {
  display: flex;
  align-items: center;
  justify-content: center;
  .ac-img {
    width: 86px;
    height: 86px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .ac-jt {
    margin-left: 26px;
    line-height: 30px;
  }
}
.cancellationOrder {
  margin-top: 10px;
  color: #2b2b2b;
  font-size: 14px;
  cursor: pointer;
}
.student-head {
  display: flex;
  justify-content: space-between;
  .student-head-right {
    display: flex;
  }
}
.footer {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>